<script setup lang="ts">
import { storeToRefs } from "pinia"
// import { useRouter } from "vue-router"
import { useAppStore } from '@/stores/modules/global'

import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import ko from 'element-plus/dist/locale/ko.mjs'

const lang = {
  'zh-cn': zhCn,
  en,
  ko
}

/* 
为了从 store 中提取属性时保持其响应性，你需要使用 storeToRefs()。它将为每一个响应式属性创建引用。
当你只使用 store 的状态而不调用任何 action 时，它会非常有用。
请注意，你可以直接从 store 中解构 action，因为它们也被绑定到 store 上
*/
const appStore = useAppStore()
const { locale } = storeToRefs(appStore)

// ref ts中获取值是通过.value template 中不需要加.value
/* const currentLang = computed(() => {
  console.log(lang[locale.value])
  return lang[locale.value]
}) */

/* const router = useRouter()
router.push({path: '/login'}) */

</script>

<template>
  <el-config-provider :locale="lang[locale]">
    <el-watermark
      :width="200"
      :height="60"
      :rotate="-30"
      :gap="[30, 50]"
      :font="{
        fontSize: 16,
        color: 'rgba(100, 200, 250, 0.2)',
      }"
      :content="['algate-admin', 'vite+vue3+ts+pinia']"
    >
      <RouterView />
    </el-watermark>
  </el-config-provider>
</template>
